<template>
  <a-card style="width: 100%; margin-top: 20px">
    <a-form layout="inline" :model="essaysQuery">
      <a-row justify="center">
        <a-col :span="4">
          <a-form-item>
            <a-input v-model:value="essaysQuery.title" placeholder="标题">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item>
            <a-input v-model:value="essaysQuery.description" placeholder="介绍">
            </a-input>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item>
            <span class="font-size">点赞：</span>
            <a-switch
              v-model:checked="essaysQuery.supported"
              placeholder="介绍"
            />
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-form-item>
            <span class="font-size">时间：</span>
            <a-switch v-model:checked="essaysQuery.sorted" />
          </a-form-item>
        </a-col>

        <a-col :span="4">
          <a-form-item>
            <a-button type="primary" @click="getEssays()"> 查询 </a-button>
          </a-form-item>
        </a-col>

        <a-col :span="4">
          <a-form-item>
            <a-button @click="getClear()"> 清除 </a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>

  <a-card
    v-for="text in essays"
    :key="text.id"
    hoverable
    style="width: 100%; margin-top: 20px"
  >
    <template #actions>
      <edit-outlined v-if="is_me()" @click="update_text(text.id)" key="edit" />
      <a-popconfirm
        v-if="is_me()"
        title="你确定要删除该文章吗?"
        ok-text="确定"
        cancel-text="取消"
        @confirm="delete_text(text.id)"
      >
        <delete-outlined
          key="delete"
        />
      </a-popconfirm>
      <search-outlined @click="essay_info(text.id)" key="search" />
    </template>
    <a-card-meta :title="text.title">
      <template #description>
        <a-typography-text
          :style="true ? { width: '200px' } : {}"
          ellipsis="true"
          :content="text.description"
        />
      </template>
    </a-card-meta>
    <div style="float: right"><like-outlined /> {{ text.support }}</div>
  </a-card>
  <a-pagination
    style="margin-top: 20px"
    v-model:current="current"
    :total="total"
    show-quick-jumper
    :defaultPageSize="limit"
    @change="getEssays"
    show-less-items
  />
</template>

<script>
import {
  EditOutlined,
  DeleteOutlined,
  LikeOutlined,
  SearchOutlined,
} from "@ant-design/icons-vue";
import { reactive, ref } from "@vue/reactivity";
import essayApi from "@/apis/essayApi";
import { useStore } from "vuex";
import router from "@/router";
import { useRoute } from "vue-router";

export default {
  name: "UserTextList",
  components: {
    EditOutlined,
    DeleteOutlined,
    LikeOutlined,
    SearchOutlined,
  },

  setup() {
    const store = useStore();
    const access = store.state.user.info.access;

    const route = useRoute();
    const userId = route.params.userId;

    const essaysQuery = reactive({
      title: "",
      description: "",
      supported: false,
      sorted: false,
    });

    const essays = ref([]);

    const total = ref("");

    const current = ref(1);

    const limit = 3;

    const delete_text = (id) => {
      essayApi.deleteEssays(id, access).then((resp) => {
        if (resp.code === 200) {
          essays.value = essays.value.filter((essay) => essay.id != id);
          getEssays();
        }
      });
    };

    essayApi.getEssays(userId, limit, 1, essaysQuery, access).then((resp) => {
      essays.value = resp.data.records;
      total.value = resp.data.total;
    });

    const getEssays = () => {
      essayApi
        .getEssays(userId, limit, current.value, essaysQuery, access)
        .then((resp) => {
          essays.value = resp.data.records;
          total.value = resp.data.total;
        });
    };

    const getClear = () => {
      (essaysQuery.title = ""),
        (essaysQuery.description = ""),
        (essaysQuery.supported = false),
        (essaysQuery.sorted = false);
      getEssays();
    };

    const essay_info = (id) => {
      router.push({ name: "essay", params: { userId: id } });
    };

    const update_text = (id) => {
      router.push({ name: "essayupdate", params: { essayId: id } });
    };

    const is_me = () => {
      if (store.state.user.info.id === userId) return true;
      else return false;
    };

    return {
      essays,
      essaysQuery,
      total,
      current,

      limit,

      delete_text,
      update_text,
      getEssays,
      essay_info,
      getClear,
      is_me,
    };
  },
};
</script>

<style scoped>
.font-size {
  font-size: 12px;
}
</style>
